<template>
  <!-- 顶部人物展示 -->
  <div>

  
    <div class="top"> 
      <div v-if="user.virtuallyImage !=''" class="userInfo">
        <el-image  class="image16"  :src="'http://localhost:8080/api/files/'+user.virtuallyImage ">
          <i class="el-icon-picture-outline"></i>
        </el-image>
        <div>{{user.virtuallyName}}</div>
        <div>个性签名 ：{{ user.personal }}</div>
      </div>
      <div v-else class="userInfo">
        <el-image  class="image16"  :src="'http://localhost:8080/api/files/'+1710084365837 ">
          <i class="el-icon-picture-outline"></i>
        </el-image>
        <div>未选择角色</div>
        <div>个性签名 ：。。。。</div>
      </div>
      <div>
        <el-button type="primary" @click="change()" v-if="user.virtuallyImage !=''">更换匿名</el-button>
        <el-button type="primary" @click="change()" v-else>选择匿名</el-button>
        <el-button type="primary" @click="add()">发布信息</el-button>
      </div>
    </div>
    <!-- 内容展示 -->


    <div>
      
      <el-row :gutter="20">
        <el-col :span="18" >
          <!-- 通过链接跳转过来 -->
          <div class="grid-content bg-purple" v-if="categoryInfo.id != null">
            <!-- 显示分类信息 -->
            <div style="display: flex;    align-items: center; border-bottom: 1px solid lightgrey;margin-top: 16px; ">
              <!-- 分类头像 -->
              <div>
                <el-image  class="image121" :src="'http://localhost:8080/api/files/' +categoryInfo.categoryImage" width="24px" height="24px"></el-image>
              </div>
              <!-- 分类介绍 -->
              <div style="display: flex;flex-direction: column;align-items: flex-start ;margin-left: 16px; height: 80px; ">
                <!-- 分类名称 -->
                <div style="font-weight: bold;font-size: 30px;padding-bottom: 4px; color: #ffffff;">
                  {{ categoryInfo.categoryName }}
                </div>
                <!-- 分类描述 -->
                <div style="color: #ffffff;">
                  {{ categoryInfo.categoryDescribe }}
                </div>
              </div>
            </div>
            <div v-if="allReply.length > 0">
              <el-card class="box-card" 
                v-for="(item, index) in allReply"
                :key="index"
                style="margin-top: 2px; "
                 >
              <span>
                <el-image  class="image12" :src="'http://localhost:8080/api/files/' +item.virtuallyImage" width="24px" height="24px"></el-image>
              </span>
              <span   style="font-size: 16px; color: #333; font-weight: bold;">
                {{ item.virtuallyName }}
              </span>
              <span style="color: #646464;font-size: 14px; ">
                {{ item.virtuallyIntro }}
              </span>
              <div @click="reply(item.articleId)" style="font-size: 18px;font-weight: 600;font-synthesis: style;line-height: 1.6;color: #1a1a1a; margin-top: 6px;cursor: pointer;">
                {{ item.articleTitle }}
              </div>
              <div v-html="item.articleContent" class="w-e-text-container" style=" cursor: pointer; "@click="reply(item.articleId)">
              </div>
              <div style="margin-top: 16px; display: flex;flex-direction: row;align-items: center;" >
                <div @click="reply(item.articleId)"><i class="el-icon-chat-line-round"></i><i>{{ item.articleCount }} 条评论</i></div><i class="el-icon-timer" style="margin-left: 20px;"></i> <i style="flood-color: #859ec5;">{{ formatTime(item.createDate) }}</i>
              </div>
            </el-card>
            </div>
            <div v-else style="height: 300px; background-color: #ffffff; margin-bottom: 30px; display: flex;align-items: center;justify-content: center;margin-top: 30px;">
              <div>
                没有相关记录哦
              </div>
            </div>
          </div>
          <!-- 点击菜单进来 -->
          <div v-else style="background-color: #ffffff;padding: 16px; margin-bottom: 30px;">
            <!-- 表头 -->
            <div>
              <span>区域树洞列表</span>
            </div>
            <!-- 所有区域树洞 -->
            <div v-for="item99 in categoryItem" key="item99.id" style="display: flex;    align-items: center; border-bottom: 1px solid lightgrey;margin-top: 16px;"
              @click="cInfo(item99.id)">
              <!-- 分类头像 -->
              <div>
                <el-image  class="image121" :src="'http://localhost:8080/api/files/' +item99.categoryImage" width="36px" height="36px"></el-image>
              </div>
              <!-- 分类介绍 -->
              <div style="display: flex;flex-direction: column;align-items: flex-start ;margin-left: 16px; height: 80px; ">
                <!-- 分类名称 -->
                <div style="font-weight: bold;font-size: 20px;line-height: 30px;">
                  {{ item99.categoryName }}
                </div>
                <!-- 分类描述 -->
                <div>
                  {{ item99.categoryDescribe }}
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="6" v-if="categoryInfo.id != null">
          <div style="background-color: #ffffff;padding-left: 20px; border-radius: 5px 5px 5px 5px;"><i class="el-icon-location-information" style="margin-right: 5px;"></i>区域树洞</div>
          <div  class="grid-content bg-purple-light" v-for="item2 in categoryItem" :key="item2.id">
            
            <el-card class="box-card" style="margin-top: 2px; " >
              <el-row :gutter="20" style="display: flex;align-items: center; font-size: 12px; ">
                <el-col :span="6">
                  <div class="grid-content bg-purple" >
                    <el-image  class="image16"  :src="'http://localhost:8080/api/files/'+item2.categoryImage "></el-image>
                  </div>
              </el-col>
                <el-col :span="18"><div class="grid-content bg-purple-light" >
                  <div slot="header" class="clearfix"  @cilck="cInfo(item2.id)">
                    <span  @cilck="cInfo(item2.id)">{{item2.categoryName}}</span>
                  </div>
                  <div class="categoryDescribe"  >
                    {{item2.categoryDescribe }}
                  </div>  
                  </div>
                </el-col>
              </el-row>
              
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
          <el-dialog title="评论信息" :visible.sync="articleMain" width="60%" >
            <div class="dialog-content">
              <div style="margin-right: 10px;">
                <!--文章标题 -->
                <div style="font-weight: bold;    font-size: 16px;color: #1a1a1a;padding-left: 40px; ">
                  {{ articleMain1.articleTitle }}
                </div>
                <!-- 文章内容 -->
                <div>
                  <div v-html="articleMain1.articleContent" class="w-e-text-container" style="padding-right: 20px;padding-top: 6px;padding-bottom: 6px;background-color: #f6f6f6;padding-left: 40px; "></div>
                </div>
              </div>
              <!--写评论 -->
              <div style="display: flex;justify-content: space-between;align-items: flex-end;margin-top: 16px;margin-right: 10px; ">
                <div>
                  <el-input style="width: 600px; margin-left: 44px;"
                    type="textarea"
                    :rows="2"
                    v-model="mainReply.replyContent"
                    placeholder="写评论。。。"
                    >
                  </el-input>
                </div>
                <div >
                  <el-button type="primary" @click="submitMReply(articleMain1)">评论</el-button>
                </div>
              </div>
              <!-- 共几条回复文章的 -->
              <div style="border-bottom: 1px solid lightgrey ;font-weight: bold;    font-size: 16px;color: #1a1a1a;padding-left: 34px;">
                {{ articleMain1.articleCount }}条评论
              </div>
              <!-- 评论内容 -->
              <div v-if="articleMain1.articleCount != 0" style="margin-top: 20px;">
                <div class="grid-content bg-purple">
                  <div style="padding-left: 5px;padding-right: 5px; margin-top: 6px;"
                      v-for="(item, index) in articleMain1.mainReply"
                      :key="index">
                      <div style="border-bottom: 1px solid lightgrey">
                      <div style="display: flex;justify-content: space-between;">
                        <div style="display: flex;align-items: center">
                          <span>
                            <el-image  class="image12" :src="'http://localhost:8080/api/files/' +item.virtuallyImage" width="24px" height="24px"></el-image>
                          </span>
                          <span   style="font-size: 16px; color: #333; font-weight: bold;margin-left: 10px;">
                            {{ item.virtuallyName }}
                          </span>
                        </div>
                        <i>{{ formatTime(item.createDate) }}</i>
                      </div>
                    
                      <div style="margin-top: 16px; margin-left: 34px;">
                        {{ item.replyContent }}
                      </div>
                      <div style="margin-top: 12px;margin-left: 34px; display: flex;flex-direction: row;align-items: center;">
                        <i class="el-icon-chat-line-round" ></i>
                        <el-popover placement="bottom">
                          <div style="display: flex; align-items: center;">
                            <el-input style="width: 600px;"
                            type="textarea"
                            :rows="2"
                            placeholder="写评论。。。"
                            v-model="chileReply.replyContent"
                            >
                            </el-input>
                            <el-button   style="margin-left: 5px;" @click="submitCReply(item)" >回复</el-button>
                          </div>
                          
                          <el-button slot="reference"  style="margin-left: 5px;">回复</el-button>
                        </el-popover>
                         <!--  <div slot="reference" @click="visible = true">回复</div> -->
                        
                      </div>
                      
                    </div>
                      <!-- 评论的回复 -->
                      <div v-if="item.childReply" style="padding-left: 20px;">
                        <div style="border-bottom: 1px solid lightgrey"
                         v-for="(item1, index) in item.childReply":key="index">
                          <div style="display: flex;justify-content: space-between; margin-top: 6px;">
                            <div style="display: flex;align-items: center">
                            <span>
                              <el-image  class="image12" :src="'http://localhost:8080/api/files/' +item1.virtuallyImage" width="24px" height="24px"></el-image>
                            </span>
                            <span   style="margin-left: 10px;">
                              <i style="font-size: 16px; color: #333; font-weight: bold;">{{ item1.virtuallyName }}</i> <i>回复</i><i style="font-size: 16px; color: #333; font-weight: bold;">   {{ item1.replyName }}</i>
                            </span>
                          </div>
                            <i>{{ formatTime(item1.createDate) }}</i>
                          </div>
                          
                          <div style="margin-top: 16px; margin-left: 34px;">
                            {{ item1.replyContent }}
                          </div>
                        <div style="margin-top: 12px; margin-left: 34px; display: flex;flex-direction: row;align-items: center;" >
                          <i class="el-icon-chat-line-round" ></i>
                          <el-popover placement="bottom" >
                            <div style="display: flex; align-items: center;">
                              <el-input style="width: 600px;"
                              type="textarea"
                              :rows="2"
                              placeholder="写评论。。。"
                              v-model="chileReply.replyContent"
                              >
                              </el-input>
                              <el-button   style="margin-left: 5px;" @click="submitCReply1(item,item1)" >回复</el-button>
                            </div>
                          <el-button slot="reference"  style="margin-left: 5px;" >回复</el-button>
                          </el-popover>
                        </div>
                        </div>
                      </div>
                  </div>
                </div>
              </div>
              <div v-else style="   
                    display: flex;
                    align-items: center;
                    height: 60px;
                    width: auto;
                    justify-content: center;
                    " >
                <div style="height: 12px;">还没有评论过哦</div>
              </div>
              
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="articleMain = false">取 消</el-button>
            </div>
            </el-dialog>
        </div>
        <div>
            <el-dialog title="请填写信息" :visible.sync="dialogFormVisible" width="50%" >
                <el-form :model="form" ref="form" >
                  <el-form-item label="标题" label-width="15%" prop="articleTitle">
                      <el-input v-model="form.articleTitle" autocomplete="off" style="width: 90%"></el-input>
                  </el-form-item>
                  <div class="dropdown1">
                    <el-dropdown @command="handleCommand" prop="articleCategoryId" >
                      <el-button type="primary" >选择区域树洞<i class="el-icon-arrow-down el-icon--right"></i>
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="item1 in dropdownItems" :key="item1.id" :command="item1.id">{{ item1.categoryName}}</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                  
                  <el-form-item label="内容" label-width="15%" >
                    <div id="editor" style="width: 90%"></div>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="submit()">发布</el-button>
                </div>
            </el-dialog>
        </div>
    
  </div>
</template>

<style>
.top{
    height: 300px;
    margin-top: 30px;
    margin-bottom: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-position-x: 270px ;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
}
.image16{
  max-width: 70px;
}
.userInfo{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.image121{
  width: 80px;
  height: 80px;

}

</style>

<script>
import request from '@/utils/request';
import { formatTime } from '@/utils/dateUtils';
import E from 'wangeditor';

let editor
function initWangEditor(content) {	setTimeout(() => {
  if(editor){
    editor.destroy();
  }
    editor = new E('#editor')
    editor.config.placeholder = '请输入内容'
    editor.config.uploadFileName = 'file'
    editor.config.uploadImgServer = 'http://localhost:8080/api/files/wang/upload'
    editor.create()
  editor.txt.html(content)
}, 0)
}

export default { 
    name: 'RegionView',
    data(){
        return{
        user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
        /* 单个分类信息 */
        categoryInfo:{},
        /* 所有分类 */
        categoryItem:[],
        /* 所有分类下的文章 */
        allReply:[],
        param:{
          pageNum : 1,
          pageSize: 5,
        },
        articleMain : false,
        articleMain:false,
        articleMain1: [],
        mainReply:{},
        chileReply:{},
        form:{},
        dialogFormVisible :false,
        dropdownItems:[],
        }
    },
     // 页面加载的时候，做一些事情，在created里面
    created() {
      const categoryId = this.$route.query.categoryId;
      if (categoryId) {
        this.fetchCategoryItems(categoryId);
        /* 查询出来这个分类的所有数据 */
        this.findCByCId(categoryId);
        this.fetchAllItems();

      } else {
       this.fetchAllItems();
      }
    },
    // 定义一些页面上控件出发的事件调用的方法
    methods: {  
      /* 查询对应分类里所有的文章 */
      formatTime,
      fetchCategoryItems(str){
        this.param.articleTags = "2",
        this.param.articleCategoryId= str,
        request.get("/articleMain/page",{
                params: this.param
            }).then(res=>{
          if(res.code === 1){
            this.allReply = res.data.list
            console.info(this.allReply)
          }else{
            this.$message.error(res.msg)
          }
        })
        
      },
      /* 查询所有分类 */
      fetchAllItems(){
        request.get("/articleCategory/page",{
                params: this.param
            }).then(res=>{
          if(res.code === 1){
            this.categoryItem = res.data.list
            this.dropdownItems=res.data.list
          }else{
            this.$message.error(res.msg)
          }
        })

      },
      /* 分类文章信息 */
      findCByCId(str){
        request.get("/articleCategory/findById/" + str).then(res=>{
          if(res.code === 1){
            this.categoryInfo =res.data
          }else{
            this.$message.error(res.msg)
          }
        })
      },
      change(){
        this.$router.push("/virtual")
      },
      cInfo(key){
        this.findCByCId(key);
        this.fetchCategoryItems(key);
      },
      reply(str){
      this.articleMain = true;
      request.get("/articleMain/findById/"+str).then(res=>{
        if(res.code === 1){
          this.articleMain1 = res.data;
          
        }else{
          this.$message.error(res.msg)
        }
      })
      },
      submitMReply(obj){
      
      this.mainReply.articleId = obj.articleId;
      this.mainReply.isReply = "1"
      request.post("/articleReply/create",this.mainReply).then(res=>{
        if(res.code === 1){
          this.reply(obj.articleId)
          this.mainReply.replyContent = ''
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    submitCReply(obj){
      this.chileReply.articleId = obj.articleId;
      this.chileReply.isReply = "2"
      this.chileReply.replyId = obj.id
      request.post("/articleReply/create",this.chileReply).then(res=>{
        if(res.code === 1){
          this.reply(obj.articleId)
          this.chileReply.replyContent = ''
        }else{
          this.$message.error(res.msg)
        }
      })

    },
    submitCReply1(obj,obj1){
      this.chileReply.articleId = obj.articleId;
      this.chileReply.isReply = "3"
      this.chileReply.replyId = obj.id
      this.chileReply.replyIdReply = obj1.id
      request.post("/articleReply/create",this.chileReply).then(res=>{
        if(res.code === 1){
          this.reply(obj.articleId)
          this.chileReply.replyContent = ''
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    add(){
        initWangEditor("")
        //查询分类
        this.form = {};
        this.dialogFormVisible = true
      },
      submit(obj){
      this.form.articleContent = JSON.parse(JSON.stringify(editor.txt.html()));
      this.form.articleTags = 2;
      this.$refs.form.validate((valid) => {
      if (valid) {
        request.post("/articleMain/create",this.form).then(res=>{
        if(res.code === 1){

          this.$message ({
            message:"操作成功",
            type:"success"
          });
            this.dialogFormVisible = false;
            
          }else{
            this.$message ({
            message:res.msg,
            type:"error"
          });
        }
      })
        }
      else {
        return false;
      }})
      
    },
    handleCommand(command) {
      // 处理下拉菜单点击事件
      this.form.articleCategoryId=command;
    },
    
    }
}
</script>